<template>
  <view>
    <u-navbar title="拼团详情" :custom-back="back"></u-navbar>
    <view class="pintuan-wrap" v-if="!$u.test.empty(pintuanData)">
      <view class="pintuan-course">
        <courseImage
          width="296"
          height="164"
          :image="pintuanData.product_cover"
          :courseType="pintuanData.product_type"
          :courseTypeText="pintuanData.product_type_text"
          :promotionType="pintuanData.promotion_type"
          :promotionTypeText="pintuanData.promotion_type_text"
        ></courseImage>
        <view class="content">
          <view class="u-line-2 title">{{ pintuanData.product_title }}</view>
          <view class="price">
            <view class="selling">{{ pintuanData.price | formatCurrency }}</view>
            <view class="original">{{ pintuanData.product_price | formatCurrency }}</view>
          </view>
        </view>
      </view>
      <view class="pintuan-view">
        <!-- 已加入团 -->
        <template v-if="pintuanData.join_status == 1">
          <view
            class="promotion-wrap"
            v-if="pintuanData.status == 1 && pintuanData.expiry_countdown != 0"
          >
            <view class="text">
              距离拼团成功还差
              <text>{{ pintuanData.total_num - pintuanData.join_num }}</text>
              人
            </view>
            <view class="number">
              <u-count-down
                :timestamp="pintuanData.expiry_countdown"
                bg-color=""
                separator-size="20"
                separator-color="#FF6B25"
                font-size="20"
                color="#FF6B25"
                separator="zh"
                :show-days="true"
                :show-hours="false"
                :show-minutes="false"
                :show-seconds="false"
                :hide-zero-day="true"
                class="count-down-days"
              ></u-count-down>
              <u-count-down
                :timestamp="pintuanData.expiry_countdown"
                height="36"
                bg-color="#FF6B25"
                separator-size="20"
                separator-color="#FF6B25"
                font-size="20"
                color="#ffffff"
                class="count-down"
                :hide-zero-day="true"
                @end="changeType"
              ></u-count-down>
            </view>
          </view>
          <view class="promotion-wrap" v-else-if="pintuanData.status == 2">
            <view class="text">拼团成功</view>
            <view class="desc">恭喜您拼团成功，快去观看课程吧～</view>
          </view>
          <view
            class="promotion-wrap"
            v-else-if="pintuanData.status == 3 || pintuanData.expiry_countdown == 0"
          >
            <view class="text">拼团失败</view>
            <view class="desc">拼团时间已过，款项将自动退回</view>
          </view>
        </template>
        <!-- 未加入团 -->
        <template v-else-if="pintuanData.join_status == 0">
          <view
            class="promotion-wrap"
            v-if="pintuanData.status == 1 && pintuanData.expiry_countdown != 0"
          >
            <view class="text">
              距离拼团成功还差
              <text>{{ pintuanData.total_num - pintuanData.join_num }}</text>
              人
            </view>
            <view class="number">
              <u-count-down
                :timestamp="pintuanData.expiry_countdown"
                bg-color=""
                separator-size="20"
                separator-color="#FF6B25"
                font-size="20"
                color="#FF6B25"
                separator="zh"
                :show-days="true"
                :show-hours="false"
                :show-minutes="false"
                :show-seconds="false"
                :hide-zero-day="true"
                class="count-down-days"
              ></u-count-down>
              <u-count-down
                :timestamp="pintuanData.expiry_countdown"
                height="36"
                bg-color="#FF6B25"
                separator-size="20"
                separator-color="#FF6B25"
                font-size="20"
                color="#ffffff"
                class="count-down"
                :hide-zero-day="true"
                @end="changeType"
              ></u-count-down>
            </view>
          </view>
          <view class="promotion-wrap" v-else-if="pintuanData.status == 2">
            <view class="text">已经拼团成功啦～</view>
            <view class="desc">好友已经拼团成功啦～</view>
          </view>
          <view class="promotion-wrap" v-else-if="pintuanData.status == 3">
            <view class="text">拼团失败</view>
            <view class="desc">拼团时间已过，款项将自动退回</view>
          </view>
        </template>
        <view class="promotion-list">
          <view class="item" v-for="(item, index) in pintuanData.tuan_data" :key="index">
            <u-avatar
              size="88"
              :class="{
                border: item.user_id == userInfo.id,
              }"
              :src="item.current_user_avatar_url"
            ></u-avatar>
            <u-image
              class="chief"
              width="38rpx"
              height="20rpx"
              v-if="pintuanData.user_id == item.user_id"
              src="@/pageCourse/static/images/pintuan_captain_icon.png"
            ></u-image>
          </view>
          <view class="item" v-if="pintuanData.tuan_data.length == 0"
            ><u-avatar
              src="@/pageCourse/static/images/pintuan_head_placeholder.png"
              size="88"
            ></u-avatar
          ></view>
        </view>
        <template v-if="pintuanData.join_status == 1">
          <u-button
            shape="circle"
            hover-class="none"
            v-if="pintuanData.status == 1 && pintuanData.expiry_countdown != 0"
            @click="handleInvite"
            :custom-style="customStyle"
            >邀请好友参团</u-button
          >
          <u-button
            shape="circle"
            hover-class="none"
            v-if="pintuanData.status == 1 && pintuanData.expiry_countdown == 0"
            @click="handleCreatePintuan"
            :custom-style="customStyle"
            >重新开团</u-button
          >
          <u-button
            shape="circle"
            hover-class="none"
            v-else-if="pintuanData.status == 2"
            @click="handleView"
            :custom-style="customStyle"
            >查看课程</u-button
          >
          <u-button
            shape="circle"
            hover-class="none"
            v-else-if="pintuanData.status == 3"
            @click="handleCreatePintuan"
            :custom-style="customStyle"
            >重新开团</u-button
          >
        </template>
        <template v-else>
          <u-button
            v-if="pintuanData.expiry_countdown == 0"
            shape="circle"
            hover-class="none"
            @click="handleCreatePintuan"
            :custom-style="customStyle"
            >重新开团</u-button
          >
          <u-button
            v-else
            shape="circle"
            hover-class="none"
            :disabled="pintuanData.status == 2"
            @click="handleJoinPintuan"
            :custom-style="customStyle"
            >参与拼团</u-button
          >
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import uniCopy from '@/utils/xb-copy/uni-copy.js'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseImage,
  },
  data() {
    return {
      pintuanData: {},
      id: '',
      customStyle: {
        margin: '200rpx auto 0',
        color: '#ffffff',
        fontSize: ' 32rpx',
        width: '400rpx',
        height: ' 75rpx',
        backgroundColor: '#ff8a52',
      },
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getDetailsInfo(options.id)
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/getUserInfo',
    }),
  },
  options: { styleIsolation: 'shared' },
  methods: {
    getDetailsInfo(id) {
      this.$edu.api
        .getPromotionPintuanDetail({
          tuan_id: id,
        })
        .then((res) => {
          this.pintuanData = res.data
        })
    },
    // 邀请好友
    handleInvite() {
      this.$edu.judgeLogin(() => {
        this.$u.route('/pageCourse/course/share', {
          type: 11,
          id: this.pintuanData.product_id,
          promotion: this.pintuanData.id,
        })
      })
    },
    // 参与拼团
    handleJoinPintuan() {
      this.$edu.api
        .postPromotionPintuanJoin({
          tuan_id: this.pintuanData.id,
        })
        .then((res) => {
          this.$u.route('/pageCourse/cart/course', {
            id: this.pintuanData.product_id,
            promotion_id: this.pintuanData.promotion_id,
          })
        })
    },
    // 重新开团
    handleCreatePintuan() {
      uni.redirectTo({
        url: '../details?id=' + this.pintuanData.product_id,
      })
    },
    // 查看课程
    handleView() {
      this.$u.route({
        type: 'redirectTo',
        url: 'pageCourse/course/details',
        params: {
          id: this.pintuanData.product_id,
        },
      })
    },
    // 倒计时结束
    changeType() {
      this.getDetailsInfo(this.id)
    },
    // 返回
    back() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({
          type: 'redirectTo',
          url: 'pageCourse/course/details',
          params: {
            id: this.pintuanData.product_id,
          },
        })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.pintuan-wrap {
  padding: 90rpx 30rpx 0;
  position: relative;
  background-image: url('@/pageCourse/static/images/activity_details_bg.png');
  background-size: 750rpx 200rpx;
  background-repeat: no-repeat;
  .pintuan-course {
    display: flex;
    padding: 28rpx 16rpx;
    border-radius: 8rpx;
    background-color: #ffffff;
    .content {
      flex: 1;
      margin-left: 16rpx;
      .title {
        font-size: 28rpx;
        font-weight: 400;
        line-height: 36rpx;
        height: 72rpx;
        color: $edu-main-color;
      }
      .price {
        display: flex;
        margin-top: 60rpx;
        .selling {
          font-size: 26rpx;
          font-weight: 500;
          color: $edu-price-color;
        }
        .original {
          font-size: 24rpx;
          font-weight: 400;
          color: #b7bac1;
          text-decoration: line-through;
          margin-left: 8rpx;
        }
      }
    }
  }
  .pintuan-view {
    margin-top: 24rpx;
    padding: 56rpx 53rpx 80rpx;
    background: #ffffff;
    border-radius: 8px;
    .promotion-wrap {
      display: flex;
      align-items: center;
      flex-direction: column;
      .text {
        font-size: 32rpx;
        font-weight: 500;
        color: $edu-main-color;
        margin-bottom: 30rpx;
        text {
          color: #ff8a52;
        }
      }
      .desc {
        font-size: 20rpx;
        font-weight: 400;
        color: $edu-content-color;
      }
      .number {
        display: flex;
        align-items: center;
        /deep/.count-down-days {
          margin-right: 14rpx;
          .u-countdown-item,
          .u-countdown-colon {
            padding: 0;
          }
        }
        /deep/.count-down {
          .u-countdown-item:nth-child(1),
          .u-countdown-colon:nth-child(2) {
            display: none;
          }
        }
      }
    }
    .promotion-list {
      /* #ifndef MP-WEIXIN */
      margin: 60rpx -18rpx 0;
      /* #endif */
      /* #ifdef MP-WEIXIN */
      margin-top: 60rpx;
      /* #endif */
      display: flex;
      flex-wrap: wrap;
      .item {
        padding: 16rpx 18rpx;
        position: relative;
        .border {
          /* #ifndef MP-WEIXIN */
          border: 2rpx solid #ff8a52;
          /* #endif */
        }
        .chief {
          position: absolute;
          left: 50%;
          bottom: 4rpx;
          transform: translate(-50%, -50%);
          /deep/.u-image__image {
            display: block;
          }
        }
      }
    }
  }
}
</style>
